<template>
  <!-- 导航栏 -->
  <div id="header">
    <div class="container">
      <el-menu :default-active="$router.path" class="el-menu-demo" mode="horizontal" @select="handleSelectMenu"
        background-color="#1c2327" text-color="#fff" active-text-color="#fc3116" :router="true">
        <el-menu-item index="logo">
          <el-image class="logo" :src="require('@/assets/images/logo.png')" @click="refresh"></el-image>
        </el-menu-item>
        <el-menu-item index="home">
          首页
        </el-menu-item>
        <el-menu-item index="article">
          文章
        </el-menu-item>
        <el-menu-item index="baiduHot">
          热点
        </el-menu-item>
        <el-submenu index="title">
          <template slot="title">分类</template>
          <el-menu-item v-for="item in articleCategoryList" :key="item.id" :index="item.id"
            :route="{ path: '/article', query: { categoryId: item.id } }">
            {{ item.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import {
    articleCategoryQueryList
} from '@/api/article'

export default {
    components: {},
    name: 'my-header',
    data () {
        return {
            activeIndex: 'home',
            articleCategoryList: [],
            keyword: ''
        }
    },
    methods: {
        handleSelectMenu (key, keyPath) {
            // console.log(key, keyPath)
        },
        refresh () {
            location.reload()
        }
    },
    mounted () {
    // 分类下拉列表
        articleCategoryQueryList({
            enabled: true
        }).then((response) => {
            let data = response.data
            this.articleCategoryList = data
        })
    }
}
</script>

<style scoped>
#header {
  width: 100%;
  height: 50px;
  margin: 0px;
  padding: 0px;
}

.container {
  height: 50px;
  width: auto;
  margin: 0px 60px 0px 60px;
  background-color: #1c2327;
}

.el-menu-demo {
  height: 50px;
}

/* LOGO */
.logo {
  margin-top: 0px;
  width: 50px;
  height: 30px;
  line-height: 30px;

}

/* router-link去掉下划线 */
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

/* 二级菜单样式修改 */
.el-menu.el-menu--horizontal {
  border: none;
  height: 50px;
  font-size: 14px;
}

.el-menu--horizontal>.el-menu-item {
  height: 50px;
  line-height: 50px;
}

/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 50px;
  line-height: 50px;
}

/* 菜单样式修改 */
.el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}

/* 二级菜单 */
.el-submenu /deep/ .el-submenu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
</style>
